<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>配送路线说明</title>
    <style type="text/css">
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
        #panel .amap-lib-driving {
            border-radius: 4px;
            overflow: hidden;
        }
    </style>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <!--高德提供的安全秘钥-->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "394e459f5aa9977ba150155640a7d0ff",
        }
    </script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=41804d27a2b546f88d24d55332a5c799&plugin=AMap.Riding"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">



    function computeDis(){
        var p1 = m1.getPosition();
        var p2 = m2.getPosition();
        var textPos = p1.divideBy(2).add(p2.divideBy(2));
        var distance = Math.round(p1.distance(p2));
        var path = [p1,p2];
        line.setPath(path);
        text.setText('间隔'+distance+'米')
        text.setPosition(textPos)
    }
    function computeDis1(){
        var p1 = m1.getPosition();
        var p3 = m3.getPosition();
        var textPos1 = p1.divideBy(2).add(p3.divideBy(2));
        var distance1 = Math.round(p1.distance(p3));
        var path1 = [p1,p3];
        line1.setPath(path1);
        text1.setText('间隔'+distance1+'米')
        text1.setPosition(textPos1)
    }

</script>

<script src="js/jquery.min.js"></script>
<script src="js/getParameter.js"></script>
<script>
      var  tradeNo = getParameter("tradeNo");
      var  expire = getParameter("expire");
      var  courierId = getParameter("courierId");
      $.get("/dispatch/loadRouteInfo?tradeNo="+tradeNo+"&courierId="+courierId+"&expire="+expire,function (res) {
          if(res.code==0){
              $("#container").html("<h2>订单已经送达!</h2>")
          }else{
              var userLngLat = res.data.split("_")[0];
              var shopLngLat = res.data.split("_")[1];
              var riderLngLat = res.data.split("_")[2];
              // 创建一个 Icon
              var startIcon = new AMap.Icon({
                  // 图标尺寸
                  size: new AMap.Size(60, 80),
                  // 图标的取图地址
                  image: 'img/rider.png',
                  // 图标所用图片大小
                  imageSize: new AMap.Size(45, 30),
                  // 图标取图偏移量
                  imageOffset: new AMap.Pixel(-5, 1)
              });


              // 创建一个 Icon
              var userIcon = new AMap.Icon({
                  // 图标尺寸
                  size: new AMap.Size(100, 140),
                  // 图标的取图地址
                  image: 'img/user.png',
                  // 图标所用图片大小
                  imageSize: new AMap.Size(45, 30),
                  // 图标取图偏移量
                  imageOffset: new AMap.Pixel(-1, 1)
              });


              // 创建一个 Icon
              var shopIcon = new AMap.Icon({
                  // 图标尺寸
                  size: new AMap.Size(80, 100),
                  // 图标的取图地址
                  image: 'img/Commercial_owner.png',
                  // 图标所用图片大小
                  imageSize: new AMap.Size(45, 30),
                  // 图标取图偏移量
                  imageOffset: new AMap.Pixel(-1, 1)
              });

              //根据起终点坐标规划骑行路线
          var map = new AMap.Map("container", {
              resizeEnable: true,
              zoom: 13
          });
          //  骑手地址坐标  m1
          var m1 = new AMap.Marker({
              map: map,
              icon:startIcon,
              draggable:true,
              position: new AMap.LngLat(parseFloat(riderLngLat.split(",")[0]), parseFloat(riderLngLat.split(",")[1]))
          });
          //  商家地理坐标  m2
          var m2 = new AMap.Marker({
              map: map,
              icon:shopIcon,
              draggable:true,
              position:new AMap.LngLat(parseFloat(shopLngLat.split(",")[0]), parseFloat(shopLngLat.split(",")[1]))
          });
         //  用户地理位置
          var m3 = new AMap.Marker({
              map: map,
              icon: userIcon,
              draggable:true,
              position:new AMap.LngLat(parseFloat(userLngLat.split(",")[0]), parseFloat(userLngLat.split(",")[1]))
          });

          m1.setLabel({
              offset: new AMap.Pixel(1, -5), //设置文本标注偏移量
              content: "<div style='color: blue'>骑手位置</div>", //设置文本标注内容
              direction: 'top' //设置文本标注方位
          });

          m2.setLabel({
              offset: new AMap.Pixel(1, -5), //设置文本标注偏移量
              content: "<div style='color: blue'>商家地址</div>", //设置文本标注内容
              direction: 'top' //设置文本标注方位
          });

          m3.setLabel({
              offset: new AMap.Pixel(1, -5), //设置文本标注偏移量
              content: "<div style='color: blue'>用户地址</div>", //设置文本标注内容
              direction: 'top' //设置文本标注方位
          });

          map.setFitView();
          var line = new AMap.Polyline({
              strokeColor:'#80d8ff',
              isOutline:true,
              outlineColor:'white'
          });
          var line1 = new AMap.Polyline({
              strokeColor:'#80d8ff',
              isOutline:true,
              outlineColor:'white'
          });
          line.setMap(map);
          line1.setMap(map);
          var text = new AMap.Text({
              text:'xxxx',
              style:{'background-color':'#29b6f6',
                  'border-color':'#e1f5fe',
                  'font-size':'12px'}
          });
          var text1 = new AMap.Text({
              text1:'yyyy',
              style:{'background-color':'#29b6f6',
                  'border-color':'#e1f5fe',
                  'font-size':'12px'}
          });
          text.setMap(map);
          text1.setMap(map);

          var p1 = m1.getPosition();
          var p2 = m2.getPosition();
          var textPos = p1.divideBy(2).add(p2.divideBy(2));
          var distance = Math.round(p1.distance(p2));
          var path = [p1,p2];
          line.setPath(path);
          text.setText(distance+'米')
          text.setPosition(textPos)


          var p1 = m1.getPosition();
          var p3 = m3.getPosition();
          var textPos1 = p1.divideBy(2).add(p3.divideBy(2));
          var distance1 = Math.round(p1.distance(p3));
          var path1 = [p1,p3];
          line1.setPath(path1);
          text1.setText(distance1+'米')
          text1.setPosition(textPos1)
          }
      })
</script>

</body>
<!--<script>-->
     <!--// websocket     链接配置-->
        <!--if(typeof(WebSocket) == "undefined") {-->
            <!--console.log("您的浏览器不支持WebSocket");-->
        <!--}else{-->
            <!--console.log("您的浏览器支持WebSocket");-->
            <!--//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接-->
            <!--//等同于socket = new WebSocket("ws://localhost:8888/xxxx");-->
            <!--var socketUrl="ws://localhost:8081/ws/route_"+Math.random().toString(36).substr(2);;-->
            <!--console.log(socketUrl);-->
            <!--if(socket!=null){-->
                <!--socket.close();-->
                <!--socket=null;-->
            <!--}-->
            <!--var socket = new WebSocket(socketUrl);-->
            <!--//打开事件-->
            <!--socket.onopen = function() {-->
                <!--console.log("websocket已打开");-->
            <!--};-->
            <!--//获得消息事件-->
            <!--socket.onmessage = function(msg) {-->
                <!--console.log(msg.data);-->
            <!--};-->
            <!--//关闭事件-->
            <!--socket.onclose = function() {-->
                <!--console.log("websocket已关闭");-->
            <!--};-->
            <!--//发生了错误事件-->
            <!--socket.onerror = function() {-->
                <!--console.log("websocket发生了错误");-->
            <!--}-->
        <!--}-->

    <!--function sclose() {-->
        <!--socket.close();-->
    <!--}-->

<!--</script>-->
</html>
